<template>
  <div class="evant-progress-container">
    <div class="icon-container">
      <slot name="icon">
        <i class="icon-volume"></i>
      </slot>
    </div>
    <div
        class="slider"
        ref="slider"
        :style="{'background': this.progressBgColor}"
    >
      <div class="process"
           :style="[
                 {'width': width},
                 {'background': this.progressColor}
               ]"
      >

      </div>
      <div class="thunk"
           ref="trunk"
           :style="[
                {'left': left},
                thunkStyle
            ]"
      >
        <div class="block" ref="block" :style="[blockStyleObject]"></div>
        <!-- top -->
        <div class="tips" v-if="placement === 'top'">
          <span class="tips-text">{{percentNumber}}</span>
          <i class="fa-caret-down"></i>
        </div>
      </div>
      <!-- right -->
      <div class="tips-right" v-if="placement === 'right'">{{percentNumber}}</div>
    </div>
  </div>
</template>
<script>
// 颜色
const colorTable = {

}
/*
 * min 进度条最小值
 * max 进度条最大值
 * v-model 对当前值进行双向绑定实时显示拖拽进度
 * */
// 进度文字提示的位置
const placement = ['top', 'right']
export default {
  model: {
    prop: "value"
  },
  props: {
    min: { // 最小值
      type: Number,
      default: 0
    },
    max: { // 最大值
      type: Number,
      default: 100
    },
    value: { // v-model的值 -- 当前值
      type: Number,
      default: 20
    },
    placement: { // 进度文字提示位置
      type: String,
      default: 'top',
      validator: value => {
        return placement.includes(value)
      }
    },
    // 进度条颜色
    progressColor: {
      type: String,
      default: "#409eff"
    },
    // 进度条背景颜色
    progressBgColor: {
      type: String,
      default: "#e4e7ed"
    },
    // 圆圈滑块的外部样式
    thunkStyleObject: {
      type: Object,
    },
    // 圆圈滑块的内部部样式
    blockStyleObject: {
      type: Object,
    }
  },
  data() {
    return {
      slider: null, //滚动条DOM元素
      thunk: null, //拖拽DOM元素
      block: null, // 圆圈块的DOM元素
      newWidth: null, // 新的宽度
      per: 0 //当前值 因为data中的值是深度拷贝无法跟随着props的value值改变而改变
    };
  },
  watch: {
    scale() {
      this.$emit("getPercent", this.percentNumber)
    },
    value: { // 因为data中的值是深度拷贝无法跟随着props的value值改变而改变
      immediate: true,
      deep: true,
      handler(cur) {
        this.per = cur
      }
    }
  },
  //渲染到页面的时候
  mounted() {
    this.init()
  },
  computed: {
    // 设置一个百分比，提供计算slider进度宽度和trunk的left值
    // 对应公式为  当前值-最小值/最大值-最小值 = slider进度width / slider总width
    // trunk left =  slider进度width + trunk宽度/2
    scale() {
      return (this.per - this.min) / (this.max - this.min);
    },
    percentNumber() {
      return parseInt(this.per)
    },
    width() {
      if (this.slider) {
        return this.slider.offsetWidth * this.scale + "px";
      } else {
        return 0 + "px";
      }
    },
    left() {
      if (this.slider) {
        return (
            this.slider.offsetWidth * this.scale -
            this.thunk.offsetWidth / 2 +
            "px"
        );
      } else {
        return 0 + "px";
      }
    },
    thunkStyle() {
      return this.thunkStyleObject
    }
  },
  methods: {
    init () {
      this.slider = this.$refs.slider
      this.thunk = this.$refs.trunk
      this.block = this.$refs.block
      this.slider.onclick = e => {
        // 点击在小圆圈上无效
        if (e.target === this.block) return
        let disX = e.offsetX
        this.newWidth = disX
        this._countCurPercent()
      }
      this.thunk.onmousedown = e => {
        let width = parseInt(this.width)
        let disX = e.clientX;
        document.onmousemove = e => {
          // value, left, width
          // 当value变化的时候，会通过计算属性修改left，width
          // 拖拽的时候获取的新width
          this.newWidth = e.clientX - disX + width
          // 拖拽的时候得到新的百分比
          this._countCurPercent()
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null
        }
        return false;
      }
    },
    _countCurPercent () {
      let scale = this.newWidth / this.slider.offsetWidth;
      this.per = Math.ceil((this.max - this.min) * scale + this.min);
      this.per = Math.max(this.per, this.min);
      this.per = Math.min(this.per, this.max);
    }
  }
};
</script>
<style scoped>
.evant-progress-container {
  height: 100px;
  display: flex;
  align-items: center;
}
.evant-progress-container .icon-container {
  width: 24px;
  height: 18px;
  margin: -2px 12px 0px 0px;
}
.evant-progress-container .icon-container i.icon-volume {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("./icon-volume.png") center center no-repeat;
}
.slider .tips-right {
  position: absolute;
  color:#83C8FE;
  right:-50px;
  top:-2px;
  font-family: inherit;
  color: #252525;
  font-weight: bold;
  line-height: 15px;
}
.slider {
  position: relative;
  margin: 20px 0;
  width: 400px;
  height: 10px;
  /*background: #e4e7ed;*/
  border-radius: 5px;
  cursor: pointer
}

.slider .process {
  position: absolute;
  left: 0;
  top: 0;
  width: 112px;
  height: 10px;
  border-radius: 5px;
  /*background: #409eff*/
}

.slider .thunk {
  position: absolute;
  left: 100px;
  top: -6px;
  width: 20px;
  height: 20px
}

.slider .block {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #409eff;
  background: rgba(255, 255, 255, 1);
  transition: .2s all
}

.slider .tips {
  height: 24px;
  position: absolute;
  left: -5px;
  bottom: 30px;
  min-width: 22px;
  text-align: center;
  padding: 4px 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 5px;
  color: #808080;
}
.slider .tips .tips-text {
  display: inline-block;
  vertical-align: -1px;
  white-space: nowrap;
}
.slider .tips i {
  display: block;
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: 6px;
  left: 50%;
  border-width: 6px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
}
.slider .tips i.fa-caret-down:after {
  display: block;
  content: " ";
  width: 0px;
  height: 0px;
  position: absolute;
  top: 6px;
  margin-left: -6px;
  border-color: transparent;
  border-style: solid;
  border-bottom-width: 0px;
  border-top-color: #fff;
  border-width: 6px;

}
.slider .block:hover {
  transform: scale(1.1);
}
</style>
